<template>
    <div class="container">
        <div class="left">
            <template v-for="item in list" :key="item.id">
                <div class="box">{{ item.name }}</div>
            </template>
        </div>
        <div class="right">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
    </div>

</template>
<script lang="ts" setup>
const list = [
    {
        id: 1,
        name: '国际服'
    },
    {
        id: 2,
        name: 'a暗室逢灯sf'
    },
    {
        id: 3,
        name: '让人'
    },
    {
        id: 4,
        name: '森岛帆高'
    },
    {
        id: 5,
        name: '阿萨德'
    },
    {
        id: 6,
        name: '啊啊啊'
    },
    {
        id: 7,
        name: '11问问11'
    },
    {
        id: 5,
        name: '阿萨德'
    },
    {
        id: 6,
        name: '啊啊啊'
    },
    {
        id: 7,
        name: '11问问11'
    },
    {
        id: 5,
        name: '阿萨德'
    },
    {
        id: 6,
        name: '啊啊啊'
    },
    {
        id: 7,
        name: '11问问11'
    },
    {
        id: 5,
        name: '阿萨德'
    },
    {
        id: 6,
        name: '啊啊啊'
    },
    {
        id: 7,
        name: '11问问11'
    },
    {
        id: 7,
        name: '11问问11'
    },
]
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },

]
</script>
<style lang="scss">
.container {
    display: flex;
    width: 100%;

    .left {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .box {
            flex: 0 calc(25% - 10px);
            height: 50px;
            line-height: 50px;
            background: red;
            margin-right: 1px;
            text-align: center;
        }
    }

    .right {
        flex: 1;
        overflow-y: scroll;
    }
}
</style>